<template>
  <div>
    <m-card :icon="icon" :title="title" :img="imgSrc">
      <!-- 导航 -->
      <div class="nav jc-between" v-if="!peers">
        <div class="nav-item" v-for="(category,i) in categories" :key="i" :class="{active: active===i}" @click="active=i">
          <div class="nav-link fs-lg" @click="$refs.list.swiper.slideTo(i)">{{category.name}}</div>
        </div>
      </div>
      <!-- 下边具体新闻 -->
      <div class="pt-3">
        <swiper ref="list" @slide-change="() => active = $refs.list.swiper.realIndex" :options="{ autoHeight: true }">
          <swiper-slide v-for="(category,i) in categories" :key="i">
            <!-- 具名插槽（通过动态数据绑定将循环到的category传递到父组件，在父组件出定义template标签来渲染数据） -->
            <slot name="items" :item="category"></slot>
          </swiper-slide>
        </swiper>
      </div>
    </m-card>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
    imgSrc: { type: String },
    categories: { type: Array, required: true },
    peers: { type: Boolean }
  },
  data() {
    return {
      active: 0
    }
  }
}
</script>
